import React from 'react';
import { Tabs } from 'antd-mobile';
import merge from 'classnames';
import css from './tabs.less';

const tabs = [
  { title: '简易命盘' },
  { title: '专业命盘' },
  { title: '断命笔记' },
];

export default function BaziTabs({ children }: { children: any }) {
  return (
    <Tabs
      tabs={tabs}
      initialPage={0}
      onChange={(tab, index) => {
        console.log('onChange', index, tab);
      }}
      animated={false}
      renderTabBar={props => {
        const tabsElm = props.tabs.map(({ title }, index: number) => {
          return (
            <div
              // eslint-disable-next-line react/no-array-index-key
              key={`tab_${index}`}
              className={merge(css.tab, {
                [css.selected]: props.activeTab === index,
              })}
              onClick={() => {
                props.goToTab(index);
              }}
            >
              {title}
            </div>
          );
        });
        return <div className={css.tabBar}>{tabsElm}</div>;
      }}
    >
      {children}
    </Tabs>
  );
}
